<template>
  <Modal v-model="model" title="物流信息">
    <div class="pt pl h400 scroll">
      <block v-if="list.length">
        <TimelineItem v-for="(item, index) in list" :key="item.id">
          <Icon type="ios-radio-button-off" slot="dot" size="20" color="orange" v-if="index === 0"></Icon>
          <p :class="index === 0 ? 'font-orange' : ''">{{item.time}}</p>
          <p :class="index === 0 ? 'font-orange' : ''">{{item.context}}</p>
        </TimelineItem>
      </block>
      <div v-if="!list.length" class="font-gray tc pt pb mt mb">暂无快递信息</div>
    </div>
    <Button type="primary" slot="footer" @click="closeModal">关闭</Button>
    <Loader :status="status" @refresh="updateInfo(no)"></Loader>
  </Modal> 
</template>
<script>
import { formatDate } from '@/util'
export default {
  data() {
    return {
      model: false,
      status: 'pass',
      list: [],
      no: ''
    }
  },
  methods: {
    openModal() {
      this.model = true
    },
    closeModal() {
      this.model = false
    },
    updateInfo(no) {
      this.initInfo()
      if (no) {
        this.no = no
        this.status = 'loading'
        this.$ajaxGet(`/common/express/${no}`).then(data => {
          if (data) {
            this.list = (data.data || []).map(item => {
              return {
                ...item,
                time: item.ftime
              }
            })
          } else {
            this.list = []
          }
          this.openModal()
          this.status = 'pass'
        }).catch(() => {
          this.list = []
          this.status = 'pass'
        })
      }
    },
    initInfo() {
      this.list = []
    }
  }
}
</script>

